<template>
  <div class="echarts-box">
    <div class="pb-10px">
      <el-input
        v-model="searchContent"
        class="w-50%"
        placeholder="请输入关键字"
        :suffix-icon="Search"
      />
    </div>
    <div
      v-fade-in
      class="grid-box"
      :style="{ background: color[i % 5] }"
      v-for="(item, i) in filterList"
      :key="i"
    >
      <el-link :href="item.link" target="_blank">{{ item.title }}</el-link>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const color = ref(['#67C23A', '#F56C6C', '#909399', '#E6A23C', '#409EFF'])
const searchContent = ref('')
const list = ref([
  { title: 'makeApie图表案例', content: '', link: 'https://www.makeapie.cn/echarts' },
  { title: 'echarts图表集网', content: '', link: 'https://www.isqqw.com/' },
  { title: '西瓜视频流播放器', content: '', link: 'https://h5player.bytedance.com/' },
  { title: 'MDN Web 中文网', content: '', link: 'https://web.nodejs.cn/en-US/' },
  { title: 'vueHook', content: '', link: 'https://vueuse.org/' },
  { title: 'sass平台', content: '', link: 'https://sass.bootcss.com/documentation' },
  { title: 'less平台', content: '', link: 'https://lesscss.cn/' },
  { title: 'vue3', content: '', link: 'https://cn.vuejs.org/' },
  {
    title: '高德地图地图 JS API 2.0',
    content: '',
    link: 'https://lbs.amap.com/api/javascript-api-v2/guide/amap-massmarker/marker-cluster'
  },
  {
    title: '高德地图地图 JS API 2.0 手册',
    content: '',
    link: 'https://lbs.amap.com/api/javascript-api-v2/documentation#mapcenter'
  },
  {
    title: 'Ant Design of React',
    content: '',
    link: 'https://ant-design.antgroup.com/docs/react/introduce-cn'
  },
  { title: '微信公众平台', content: '', link: 'https://mp.weixin.qq.com/' },
  { title: 'npm官网', content: '', link: 'https://www.npmjs.com/' },
  {
    title: 'react-router-dom',
    content: '',
    link: 'https://reactrouter.com/en/main/hooks/use-navigate'
  },
  { title: 'lodash', content: '', link: 'https://www.lodashjs.com/' },
  { title: 'UNOCSS转换器', content: '', link: 'https://unocss.dev/play/' },
  { title: 'UNOCSS', content: '', link: 'https://unocss.dev/' },
  { title: '京东UI库', content: '', link: 'https://nutui.jd.com/' },
  { title: 'AutoJS', content: '', link: 'http://www.autojs.cc/' },
  { title: 'JavaScript游戏开发利器：kaboom.js库', content: '', link: 'https://kaboomjs.com/' },
  {
    title: 'vue-helper vscode插件用于变量寻找',
    content: '',
    link: 'http://vue-helper.80fight.cn/document/basic.html'
  },
  { title: 'Inspira UI', content: '', link: 'https://inspira-ui.com/' },
  { title: 'vue-data-ui 图表', content: '', link: 'http://vue-data-ui.graphieros.com/' },
  {
    title: 'npm config get registry 查看当前镜像查看',
    link: 'https://blog.csdn.net/gklcsdn/article/details/143883443?ops_request_misc=%257B%2522request%255Fid%2522%253A%25228c460b112b075c43b18611727cfd58d8%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=8c460b112b075c43b18611727cfd58d8&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-143883443-null-null.142^v102^pc_search_result_base2&utm_term=npm%E5%BD%93%E5%89%8D%E9%95%9C%E5%83%8F%E6%9F%A5%E7%9C%8B&spm=1018.2226.3001.4187'
  },
  {
    title: 'esp32硬件学习视频',
    link: 'https://www.itprojects.cn/'
  },
  {
    title: 'mqtt测试工具',
    link: 'https://mqttx.app/'
  },
  {
    title: 'mqtt服务代理',
    link: 'https://mosquitto.org/'
  }
])

const filterList = computed(() => {
  return list.value.filter((item) => item.title.includes(searchContent.value))
})
</script>
<style lang="less" scoped>
.echarts-box {
  width: 100%;
  height: 820px;
  background: white;
  padding: 10px;
  overflow: auto;

  .grid-box {
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 10px;

    :deep(.el-link) {
      .el-link__inner {
        font-size: 18px;
      }
    }
  }
}
</style>
